<template>
  <!-- <div>icon-select</div> -->
  <client-only>
    <el-select-v2 v-model="value" filterable :options="options">
      <template #prefix>
        <el-icon size="24" class="flex">
          <icon v-if="value" :name="value"></icon>
        </el-icon>
      </template>
      <template #default="{ item }">
        <el-icon class="mr-2">
          <icon :name="item.value"></icon>
        </el-icon>
        <span class="">{{ item.label }}</span>
      </template>
    </el-select-v2>
  </client-only>
</template>

<script setup lang="ts">
import iconifyJsonMdiChars from '@iconify-json/mdi/chars.json';
import iconifyJsonMdiMetadata from '@iconify-json/mdi/metadata.json';

const props = defineProps({
  modelValue: { type: String, default: null },
});
const emit = defineEmits(['update:modelValue']);
const value = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});

type Key = keyof typeof iconifyJsonMdiMetadata['categories'];

const options = ref([
  ...(<Key[]>Object.keys(iconifyJsonMdiMetadata.categories)).map((key) => ({
    value: `${key}`,
    label: `${key}`,
    options: iconifyJsonMdiMetadata.categories[key].map((v) => ({
      value: `mdi:${v}`,
      label: `mdi:${v}`,
    })),
  })),
]);
const loading = ref(false);
</script>

<style scoped lang="scss">
.el-select-v2 {
  :deep(.el-select-v2__placeholder) {
    // padding-left: 20px;
    margin-left: 36px;
    width: calc(100% - 76px);
  }
  // :deep(.el-select-v2__wrapper > div:nth-child(1)) {
  //   line-height: 0;
  // }
  :deep(.el-select-v2__selected-item) {
    flex: 1;
  }
}
</style>
